<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored ="false"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>北京市电子行政监察平台-编辑系统角色</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="<%=path%>/css/base.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/frame.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/jquery-tree-1.1.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			var path = "<%=path%>";
		</script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery-jtemplates.pack.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery.metadata.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery.validate.fixed.pack.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/config/config.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/util.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/jquery-tree-1.1.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/oacore.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/accountBook.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/init.js"></script>
		<script type="text/javascript">
			var treeData = "${permissionTree}";
			var tree;
			var nodeCounter = 0;
			$(function () {
				//生成权限树
				tree = new $.Tree({
					parent: $("#authSetup"),
					source: $.parseJSON(treeData),
					selectMode: "single",
					allOpen: true,
					autoBlur: true,
					onSelect: function (node) {
						showStateSelector(node);
					},
					onBlur: function (node) {
						div.remove();
					},
					pretreatment: function (node) {
						node.id = node.permissionId + "_" + node.userOrRolePermissionVersion + "_" + node.permissionName;
						node.content = node.permissionName;
						delete node.permissionName;
						node.children = node.childPermissionDTOs;
						delete node.childPermissionDTOs;
						if(node.children && node.children.length <= 0)
							delete node.children;
						switch(node.permissionTypeFlag)
						{
						case "0":
							node.content = "<span class='system'>" + node.content + "</span>";
							switch(node.permissionStatus) 
							{
							case "0":
								node.content += "<span class='state system-unspecitied unspecitied type-system'>(未指定)</span>";
								break;
							case "1":
								node.content += "<span class='state system-show show type-system'>(可见)</span>";
								break;
							case "2":
								node.content += "<span class='state system-hide hide type-system'>(不可见)</span>";
								break;
							}
							break;
						case "1":
							node.content = "<span class='auth'>" + node.content + "</span>";
							switch(node.permissionStatus)
							{
							case "0":
								node.content += "<span class='state auth-unspecitied unspecitied type-auth'>(未指定)</span>";
								break;
							case "1":
								node.content += "<span class='state auth-enabled enabled type-auth'>(允许)</span>";
								break;
							case "2":
								node.content += "<span class='state auth-disabled disabled type-auth'>(禁止)</span>";
								break;
							}
							break;
						}
						//改名字
						var form = $("#creatorForm");
						form.append("<input type='hidden' id='" + node.permissionId + "_node_id' class='_hidden_tree_data' name='role.permissionDTOs[" + nodeCounter + "].permissionId' value='" + node.permissionId + "'");
						form.append("<input type='hidden' id='" + node.permissionId + "_node_state' class='_hidden_tree_data' name='role.permissionDTOs[" + nodeCounter + "].permissionStatus' value='" + node.permissionStatus + "'");
						form.append("<input type='hidden' id='" + node.permissionId + "_node_version' class='_hidden_tree_data' name='role.permissionDTOs[" + nodeCounter + "].userOrRolePermissionVersion' value='" + node.userOrRolePermissionVersion + "'");
						form.append("<input type='hidden' id='" + node.permissionId + "_node_permissionversion' class='_hidden_tree_data' name='role.permissionDTOs[" + nodeCounter + "].userOrRolePermissionId' value='" + node.userOrRolePermissionId + "'");
						form.append("<input type='hidden' id='" + node.permissionId + "_node_userorrolepermissionId' class='_hidden_tree_data' name='role.permissionDTOs[" + nodeCounter + "].version' value='" + node.version + "'");
						delete node.permissionId;
						delete node.userOrRolePermissionVersion;
						++ nodeCounter;
						return node;
					}
				});
				//初始化表单值校验器
				var objs = {};
				objs[ACTIONS.ROLENAME_UNIQUE.params.ROLE_ID] = ${role.roleId};
				$("#roleName").data("_jqValidate_otherObjs" , objs);
				$("#creatorForm").validate();
				//重置权限
				$("#resetAuth").click(function () {
						if(confirm("您确定将所有账号权限重置为: \"未指定\"吗？"))
						{
							var stateSpan = $("span.state").removeClass("hide show unspecitied enabled disabled").addClass("unspecitied").html("(未指定)");
							stateSpan.each(function () {
									var idSpan = $(this).parents("span.jqtree-node-content");
									var idInfo = idSpan.attr("id").split("_");
									$("#" + idInfo[0] + "_node_state").val(covValueName("unspecitied"));
								});
							if(div)
								div.remove();
						}
					});
			});
	
			function covValueName(value)
			{
				switch(value)
				{
				case "unspecitied":
					return 0;
				case "show":
					return 1;
				case "hide":
					return 2;
				case "enabled":
					return 1;
				case "disabled":
					return 2;
				}
			};
	
			function getNodeDataState(node) {
				var $node = $(node);
				var stateSpan = $node.find("span.state:first");
				if($.util.hasClass(stateSpan, "hide"))
					return "hide";
				else if($.util.hasClass(stateSpan, "show"))
					return "show";
				else if($.util.hasClass(stateSpan, "enabled"))
					return "enabled";
				else if($.util.hasClass(stateSpan, "disabled"))
					return "disabled";
				else if($.util.hasClass(stateSpan, "unspecitied"))
					return "unspecitied";
			};
			
			var div;
			function showStateSelector(node) {
				var $node = $(node);
				var data = [];
				var idInfo = $node.attr("id").split("_");
				var stateSpan = $node.find("span.state:first");
				if($node.find("span.state.type-system, span.state.type-menu").size() > 0)
				{
					var state;
					if($.util.hasClass(stateSpan, "hide"))
						state = "hide";
					else if($.util.hasClass(stateSpan, "show"))
						state = "show";
					else if($.util.hasClass(stateSpan, "unspecitied"))
						state = "unspecitied";
					data.push({
							name: "未指定",
							value: "unspecitied",
							selected: (state == "unspecitied" ? true : false),
							idInfo: idInfo
						});
					data.push({
							name: "可见",
							value: "show",
							selected: (state == "show" ? true : false),
							idInfo: idInfo
						});
					data.push({
							name: "不可见",
							value: "hide",
							selected: (state == "hide" ? true : false),
							idInfo: idInfo
						});
				}
				else if($node.find("span.state.type-auth").size() > 0)
				{
					var state;
					if($.util.hasClass(stateSpan, "enabled"))
						state = "enabled";
					else if($.util.hasClass(stateSpan, "disabled"))
						state = "disabled";
					else if($.util.hasClass(stateSpan, "unspecitied"))
						state = "unspecitied";
					data.push({
							name: "未指定",
							value: "unspecitied",
							selected: (state == "unspecitied" ? true : false),
							idInfo: idInfo
						});
					data.push({
							name: "允许",
							value: "enabled",
							selected: (state == "enabled" ? true : false),
							idInfo: idInfo
						});
					data.push({
							name: "禁止",
							value: "disabled",
							selected: (state == "disabled" ? true : false),
							idInfo: idInfo
						});
				}
				if(div)
					div.remove();
				div = $("<div>");
				oacore.UI.render("pageWidget/state_selector", data, div, function () {
						var offset = $node.offset();
						offset.left += $node.width() + 16;
						div.css("position", "absolute");
						div.appendTo($node).offset(offset);
						div.find(".state").bind("click", function (event) {
								stateSpan.removeClass("hide show unspecitied enabled disabled");
								var valueList = this.value.split(" ");
								stateSpan.addClass(valueList[0]);
								stateSpan.html("(" + valueList[1] + ")");
								//保存修改过的值
								$("#" + idInfo[0] + "_node_state").val(covValueName(valueList[0]));
							});
						div.click(function (event) {
								event.stopPropagation();
							});
					});
			};
		</script>
		<style type="text/css">
			div {
				position: static;
			}
		</style>
	</head>
	<body>
		<div id="mainPage" class="surround-layout">
			<jsp:include page="../frame/top.jsp" flush="true"></jsp:include>
			<div class="middle">
				<jsp:include page="../frame/middle_left.jsp" flush="true">
					<jsp:param value="1026-1028" name="view"/>
				</jsp:include>
				<!-- 右侧输出内容 -->
				<div class="right">
					<div class="right-all-content">
						<div>
							<div class="content-line-wrap">
								<div class="content-line-left content-line">
									<h1 class="content-title">
										<span>
											<a href="<%=path %>/web/enterRoleManagementAction.action">角色管理</a>
										</span>
										<span>
											&gt;&gt;
										</span>
										<span>
											<a href="<%=path %>/web/getRoleAction?flag=edit&role.roleId=${role.roleId}">编辑角色</a>
										</span>
									</h1>
								</div>
							</div>
							<div class="inner-dialog">
								<h1 class="inner-dialog-title">编辑角色</h1>
								<div class="inner-dialog-content">
									<!-- 填入action地址 -->
									<form method="post" action="<%=path%>/web/editRoleAction.action" name="creatorForm" id="creatorForm" class="normal-form">
										<s:token></s:token>
										<input type="hidden" name="role.roleId" value=${role.roleId} />
										<input type="hidden" name="role.version" value=${role.version} />
										<table>
											<tr>
												<td colspan="2">
													<span class="form-field"><span class="important-field-star">*</span>角色名:</span>
													<input id="roleName" type="text" name="role.roleName" value=<s:property value="role.roleName" /> class="shadow nf-double-cell {dataName: true, dataUnique: ACTIONS.ROLENAME_UNIQUE, required: true, maxlength: 16, minlength: 2, messages: {dataUnique: '您输入的角色名已存在', required: '必填项', maxlength: '不能超过16个字符', minlength: '用户名不能小于2个字符', dataName: '角色名必须为数字、字母以及下划线的组合'}}" />
												</td>
											</tr>
										</table>
										<table>
											<tbody>
												<tr>
													<td>
														<span class="form-field"><span class="important-field-star">*</span>请配置权限:
															<a style="margin-left: 256px;" id="resetAuth">重置所有权限</a>
														</span>
														<div id="authSetup">
														
														</div>
													</td>
												</tr>
											</tbody>
										</table>
										<table style="margin-top: 16px;">
											<tr>
												<td colspan="2">
													<span class="form-field">描述:</span>
													<textarea name="role.roleNote" class="shadow nf-double-cell {maxlength: 64, messages: {maxlength: '不能超过64个字符'}}" ><s:property value="role.roleNote" /></textarea>
												</td>
											</tr>
										</table>
										<table>
											<tr>
												<td>
													<input type="submit" value="保存" class="special originate"></input>
												</td>
											</tr>
										</table>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--  -->
			</div>
		</div>
	</body>
</html>